<?php
$translator = \Velacolib\Utility\Utility::translate();
use Zend\Session\Container;
$user_session = new Container('user');
$this->headTitle('Đăng tin rao vặt');
?>

<link rel="stylesheet" href="<?php echo $this->basePath(); ?>/templates/front/css/topic_add.css">

<div class="page-header create_topic" id="banner" style="">

     <h3><?=$translator->translate('Create post')?></h3>
</div>
<div class="content-body">
    <form action="/raovat/dangtin" method="post" name="topic_add" accept-charset="utf-8" class="form require-validate">
        <?php if(isset($response) && $response['result'] == false): ?>
        <div class="alert alert-danger alert-dismissable">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
            <strong>Lỗi!</strong> <?=$response['message']?>
        </div>
        <?php endif ?>
        <div class="row" style="">
            <div class="col-lg-6 col-sm-6 col-md-6" style="margin-top: 5px">
                    <select class="form-control" name="cat_id">
                        <?php $cat = Velacolib\Utility\Utility::getCategoryArray(); ?>
                        <?php foreach($cat as $key_cat=>$val_cat){    ?>
                            <option value="<?php echo $val_cat->id ?>"><?php echo $val_cat->title ?></option>
                        <?php  } ?>
                    </select>
            </div>
            <div class="col-lg-6 col-sm-6 col-md-6" style="margin-top: 5px">
                <select class="form-control" name="topic_location">
                    <?php $loc = Velacolib\Utility\Utility::getLocationArray(); ?>
                    <?php foreach ($loc as $k=>$c) { ?>
                        <option value="<?php echo $k ?>"><?php echo $c ?></option>
                    <?php } ?>
                </select>
            </div>
        </div>
        <div class="row" style="margin-top: 10px">
            <div class="col-sm-6 col-lg-6 col-md-6">

                    <label class="checkbox-inline pull-left">
                        <input checked type="radio" name="topic_type" value="0"> <?=$translator->translate('Sell')?>
                    </label>
                <label class="checkbox-inline pull-left ">
                    <input  type="radio" name="topic_type" value="1"> <?=$translator->translate('Buy')?>
                </label>

            </div>
            <div class="col-sm-6 col-lg-6 col-md-6 ">

                <label class="checkbox-inline pull-right">
                    <input type="radio" name="is_brandnew" value="0"> <?=$translator->translate('Old')?>
                </label>
                <label class="checkbox-inline pull-right">
                    <input checked type="radio" name="is_brandnew" value="1"><?=$translator->translate('New')?>
                </label>
            </div>
        </div>
        <div class="row" style="margin-top: 20px;margin-bottom: 20px">
            <div class="col-sm-8 col-lg-8 col-md-8">
                <div class="form-group group_validate">
                    <label><?=$translator->translate('Title post')?></label>
                    <input req="true" type="text" name="title" id="title" class="form-control input-sm"
                           placeholder="">
                </div>
                <div class="form-group group_validate">
                    <label><?=$translator->translate('Price')?></label>
                    <input req="true" type="text" name="price" id="price-format" class="form-control input-sm price-format"    >
                </div>
                <script>
                    $(function() {
                        $('.price-format').blur(function() {
                            $('.price-format').html(null);
                            $(this).priceFormat({
                                colorize: true,
                                negativeFormat: '-%s%n',
                                roundToDecimalPlace: 0,
                                symbol: '',
                                prefix: ' ',
                                suffix: ' '  ,
                                centsLimit:0 ,
                                thousandsSeparator: '.'
                            });
                        })
                            .keyup(function(e) {
                                var e = window.event || e;
                                var keyUnicode = e.charCode || e.keyCode;
                                if (e !== undefined) {
                                    switch (keyUnicode) {
                                        case 16: break; // Shift
                                        case 17: break; // Ctrl
                                        case 18: break; // Alt
                                        case 27: this.value = ''; break; // Esc: clear entry
                                        case 35: break; // End
                                        case 36: break; // Home
                                        case 37: break; // cursor left
                                        case 38: break; // cursor up
                                        case 39: break; // cursor right
                                        case 40: break; // cursor down
                                        case 78: break; // N (Opera 9.63+ maps the "." from the number key section to the "N" key too!) (See: http://unixpapa.com/js/key.html search for ". Del")
                                        case 110: break; // . number block (Opera 9.63+ maps the "." from the number block to the "N" key (78) !!!)
                                        case 190: break; // .
                                        default: $(this).priceFormat({ colorize: true, negativeFormat: '', roundToDecimalPlace: -1, eventOnDecimalsEntered: true });
                                    }
                                }
                            })

                    });


                </script>
              <!--  <div class="form-group group_validate">
                    <label><?=$translator->translate('Expire date')?></label>
                    <p>Bài viết của bạn sẽ được đăng trong vòng 30 ngày kể từ khi bài viết được duyệt</p>
                    <!--<input req="true" type="text" name="expire_date" id="expire_date" class="form-control input-sm timepicker"  placeholder="Ex: 22/12/2019">

                </div>       -->
                <div class="form-group group_validate">
                    <label><?=$translator->translate('Content')?></label>
                    <textarea  req="true" name="full_description" id="full_description" rows="20"
                              class="form-control input-sm richtext" placeholder=""></textarea>
                </div>

            </div>
    </form>
            <div  class="col-sm-4 col-lg-4 col-md-4 ">
                <label><?=$translator->translate('Image')?></label>
                <div id="filelist">Your browser doesn't have Flash, Silverlight or HTML5 support.</div>

                <br/>
                <div id="gallery">
                    <span class="btn btn-primary" id="pickfiles" href="javascript:;"><i  class="glyphicon glyphicon-plus "></i>[<?=$translator->translate('Select Image')?>]</span>
                   <!-- <span class="btn btn-success" id="uploadfiles" href="javascript:;"><i class="glyphicon glyphicon-upload"></i>[<?=$translator->translate('Upload Image')?>]</span>  -->
                </div>
                <div  id="listimage">

                </div>
                <div id="console"></div>
                <div style="clear: both"></div>
            </div>
    <div class="row vela-col">
        <div class="col-lg-8 col-sm-8 col-md-8">
            <div class="form-group">
                <?php $auth = Velacolib\Utility\Utility::isLogin(); if($auth == false): ?>
                    <input type="submit" class="btn btn-danger" id="submit" name="next"  value="<?=$translator->translate('Continues')?>">

                    <input type="hidden"    name="next" value="true">

                <?php else : ?>
                    <input type="submit" class="btn btn-danger"  name="post" value="<?=$translator->translate('Post')?>" >
                    <input type="hidden" name="next" value="false">

                <?php endif ?>
            </div>
        </div>
    </div>
        </div>

</div>


<!--<script src="//tinymce.cachefly.net/4.0/tinymce.min.js"></script>-->
<!-- <script  src="js/bootstrap.js"></script>  -->
<script type="text/javascript" src="<?php echo $this->basePath(); ?>/templates/front/js/pupload/plupload.full.min.js"></script>
<script type="text/javascript" src="<?php echo $this->basePath(); ?>/templates/front/js/price_format.js"></script>

<script type="text/javascript">
    // Custom example logic
    $(document).ready(function () {


        $(document).on('click','i',function(){
            var id = $(this).attr('dataid');
            $("div[dataid='"+id+"']").remove();
            $("input#"+id).remove();
        })  ;

        var uploader = new plupload.Uploader({
            runtimes: 'html5,flash,silverlight,html4',
            browse_button: 'pickfiles', // you can pass in id...
            container: document.getElementById('gallery'), // ... or DOM Element itself
            url: '/raovat/addtopicimg',
            flash_swf_url: 'js/pupload/Moxie.swf',
            silverlight_xap_url: 'js/pupload/Moxie.xap',

            rename: true,

            // Sort files
            sortable: true,

            // Enable ability to drag'n'drop files onto the widget (currently only HTML5 supports that)
            dragdrop: true,
            autostart : true,

            // Views to activate
            views: {
                list: true,
                thumbs: true, // Show thumbs
                active: 'thumbs'
            },

            filters: {
                max_file_size: '10mb',
                mime_types: [
                    {title: "Image files", extensions: "jpg,gif,png,jpeg"},
                    {title: "Zip files", extensions: "zip"}
                ]
            },

            init: {
                PostInit: function () {
                    document.getElementById('filelist').innerHTML = '';

                },

                FilesAdded: function (up, files,response) {
                    plupload.each(files, function (file) {
                        document.getElementById('filelist').innerHTML += '<div style="display: none" id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b>' +
                           '</div>';
                    });
                    uploader.settings.multipart_params = {user_id:1 };
                    uploader.start();
                },

                FileUploaded: function(up, file, info) {
                    // Called when file has finished uploading   + '<input type="hidden" name="gel[]" value="'+file.name+'">'+
                    var i = 0;
                    $.each( info, function( key, value ) {
                    i++;
                        var d = new Date();
                        id = d.getTime();
                    if(parseInt(i) == 1 ){
                        var input =   '<input id="'+id+'" type="hidden" name="gel[]" value="'+value+'">';
                        var imasge = '<div dataid="'+id+'" class="list-image-item"><img style="width: 98px;height: 80px" src="'+value+'" /><i dataid="'+id+'"   class="glyphicon glyphicon-trash"></i></div>';
                        $("#filelist").append(input);
                        $("#listimage").append(imasge);
                    }


                    } );
                },
                UploadComplete: function(up, files) {
                    // Called when all files are either uploaded or failed
                  //  console.log('[UploadComplete]');
                    $('.loading').hide();
                },
                UploadProgress: function (up, file) {
                    $('.loading').show();
                    document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
                },

                Error: function (up, err) {
                    document.getElementById('console').innerHTML += "\nError #" + err.code + ": " + err.message;
                }
            }
        });

        uploader.init();
    });


</script>
<script>

</script>